<template>
  <section id="section-brand" class="d-flex flex-column align-items-center">
    <SectionTitle title="合作品牌" sub-title="Cooperative brand" />
    <b-carousel
      background="transparent"
      img-width="335"
      img-height="270"
      indicators
    >
      <b-carousel-slide
        v-for="slide in brandSlides"
        :key="slide.id"
        :caption="slide.title"
        :text="slide.desc"
        :img-src="slide.imgSrc"
      />
    </b-carousel>
  </section>
</template>

<script>
import SectionTitle from '@/components/m/SectionTitle';

export default {
  components: {
    SectionTitle,
  },
  data() {
    return {
      brandSlides: [
        {
          id: 0,
          title: '个护美妆',
          imgSrc: '/images/m/brand-slide-0.png',
        },
        {
          id: 1,
          title: '美食健康',
          imgSrc: '/images/m/brand-slide-0.png',
        },
        {
          id: 2,
          title: '家具汽车',
          imgSrc: '/images/m/brand-slide-0.png',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
#section-brand {
  padding: 30px 20px 20px;
  .carousel {
    margin-top: 20px;
  }
  ::v-deep .carousel-item {
    img {
      width: 335px !important;
      height: 270px !important;
      margin-top: 40px;
    }
  }
  ::v-deep .carousel-item.active {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  ::v-deep .carousel-item.carousel-item-next {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  ::v-deep .carousel-caption {
    top: 0px;
    bottom: unset;
    padding-top: 0px;
    padding-bottom: 0px;
    h3 {
      font-size: 16px;
      color: #000;
      line-height: 22px;
      letter-spacing: 0.57px;
      margin: 0px;
    }
  }
  ::v-deep .carousel-indicators {
    position: relative;
    margin-top: 12px;
    margin-bottom: 0px;
    li {
      width: 8px;
      height: 8px;
      border-top: none;
      border-bottom: none;
      border-radius: 50%;
      background-color: #d8d8d8;
    }
    li.active {
      background-color: rgba(253, 190, 34, 1);
    }
  }
}
</style>
